<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #data {
            position: relative;
            top: 50px;
            display: flex;
            width: 500px;
            min-height: 300px;
            overflow: auto;
            border: 1px solid black;
        }

        .active {
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    
    <!-- <button id="show">show</button> -->
    <button id="connect">connect</button>
    <button id="disconnect">disconnect</button>
    <div id="data"></div>
    <script>
        let currentPort;
        let currentReader;

        const dataArea = document.getElementById("data");

        navigator.serial.addEventListener("connect", (e) => {
            console.log(e);
        });

        navigator.serial.addEventListener("disconnect", (e) => {
            // Remove `e.target` from the list of available ports.
        });

        navigator.serial.getPorts().then((ports) => {
            // Initialize the list of available ports with `ports` on page load.
            console.log(ports);
        });

        const decoder = new TextDecoder();

        async function readData(port) {
            await port.open({ baudRate: 115200 });
            currentPort = port;
            while (port.readable) {
                const reader = port.readable.getReader();
                currentReader = reader;
                // console.log(reader)
                try {
                    while (true) {
                        const { value, done } = await reader.read();

                        // console.log(value);

                        const text = decoder.decode(value);

                        if(!text) {
                            continue;
                        }

                        console.log(text);
                        dataArea.innerText += text;

                        if(text == 1) {
                            dataArea.classList.add('active');
                        } else {
                            dataArea.classList.remove('active');
                        }

                        if (done) {
                            // |reader| has been canceled.
                            break;
                        }
                        // Do something with |value|...
                    }
                } catch (error) {
                    // Handle |error|...
                } finally {
                    reader.releaseLock();
                }
            }
        }

        const btnc = document.getElementById("connect");
        btnc.addEventListener("click", () => {
            navigator.serial
                .requestPort()
                .then((port) => {
                    readData(port);
                })
                .catch((e) => {
                    console.error(e);
                });
        });


        const btndis = document.getElementById("disconnect");
        btndis.addEventListener("click", () => {
            currentReader.releaseLock();
            currentPort.close();
        });
    </script>
</body>

</html>